<%@include file="/commons/decelerations.jsp"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<!-- ********************************************************************************************* -->
<!-- ***********************************subtable************************************************** -->
<!-- ********************************************************************************************* -->
<style type="text/css">
#indexmenu {
	margin: 0;
	padding: 0;
	list-style: none;
	position: relative;
	width: 500px;
	float: left;
	background: #000;
}
#indexmenu li {
	margin: 0;
	padding: 0;
	float: left;
	border-right: 1px solid #999;
}
#indexmenu li a {
	padding: 10px 15px;
	display: block;
	color: #fff;
	text-decoration: none;
}

#indexmenu li ul {
	margin: 0;
	padding: 15px 0;
	list-style: none;
	float: left;
	position: absolute;
	left: 0;
	width: 500px;
	color: #fff;
	background: #06c url('bottom.gif') no-repeat bottom;
	display: none;
}
#indexmenu li ul li {
	border-right: 1px solid #fff;
}
#indexmenu li ul li a {
	display: inline;
}
#indexmenu li ul li a:hover {
	text-decoration: underline;
}
</style>
<script type="text/javascript">
$(function(){
	// 幫 #menu li 加上 hover 事件
	$('#indexmenu li').hover(function(){
		// 先找到 li 中的子選單
		var _this = $(this),
			_subnav = _this.children('ul');
		// 變更目前母選項的背景顏色
		// 同時顯示子選單(如果有的話)
		_this.css('backgroundColor', '#06c');
		_subnav.css('display', 'block');
	} , function(){
		// 變更目前母選項的背景顏色
		// 同時隱藏子選單(如果有的話)
		// 也可以把整句拆成上面的寫法
		$(this).css('backgroundColor', '').children('ul').css('display', 'none');
	});
	// 取消超連結的虛線框
	$('a').focus(function(){
		this.blur();
	});
});
</script>
<!-- ********************************************************************************************* -->
<!-- ********************************subtable**End************************************************ -->
<!-- ********************************************************************************************* -->


<!-- ********************************************************************************************* -->
<!-- ****************************************web**tab********************************************* -->
<style type="text/css">
.abgne_tab ul, li {
	margin: 0;
	padding: 0;
	list-style: none;
}
.abgne_tab {
	clear: left;
	width: 800px;
	margin: 10px 0;
}
.abgne_tab ul.tabs {
	width: 100%;
	height: 32px;
	border-bottom: 1px solid #999;
	border-left: 1px solid #999;
}
.abgne_tab ul.tabs li {
	float: left;
	height: 31px;
	line-height: 31px;
	overflow: hidden;
	position: relative;
	margin-bottom: -1px;	/* 讓 li 往下移來遮住 ul 的部份 border-bottom */
	border: 1px solid #999;
	border-left: none;
	background: #e1e1e1;
}
.abgne_tab ul.tabs li a {
	display: block;
	padding: 0 20px;
	color: #000;
	border: 1px solid #fff;
	text-decoration: none;
}
.abgne_tab ul.tabs li a:hover {
	background: #ccc;
}
.abgne_tab ul.tabs li.active  {
	background: #fff;
	border-bottom: 1px solid#fff;
}
.abgne_tab ul.tabs li.active a:hover {
	background: #fff;
}
.abgne_tab div.tab_container {
	clear: left;
	width: 100%;
	border: 1px solid #999;
	border-top: none;
	background: #fff;
}
.abgne_tab div.tab_container .tab_content {
	padding: 20px;
}
.abgne_tab div.tab_container .tab_content h2 {
	margin: 0 0 20px;
}
</style>
<script type="text/javascript">
$(function(){
	// 預設顯示第一個 Tab
	var _showTab = 0;
	var $defaultLi = $('.abgne_tab ul.tabs li').eq(_showTab).addClass('active');
	$($defaultLi.find('a').attr('href')).siblings().hide();
 
	// 當 li 頁籤被點擊時...
	// 若要改成滑鼠移到 li 頁籤就切換時, 把 click 改成 mouseover
	$('.abgne_tab ul.tabs li').click(function() {
		// 找出 li 中的超連結 href(#id)
		var $this = $(this),
			_clickTab = $this.find('a').attr('href');
		// 把目前點擊到的 li 頁籤加上 .active
		// 並把兄弟元素中有 .active 的都移除 class
		$this.addClass('active').siblings('.active').removeClass('active');
		// 淡入相對應的內容並隱藏兄弟元素
		$(_clickTab).stop(false, true).fadeIn().siblings().hide();
 
		return false;
	}).find('a').focus(function(){
		this.blur();
	});
});
</script>
	<!-- ************************************jQuery**Ajax********************************************* -->
<script type="text/javascript">
function showPersonList(){
	$.ajax({
		url:"person/ListPerson",
		type:"POST",
		success: function (response) {
			$("#ListP").html(response);
        },
        error:function(xhr, ajaxOptions, thrownError){
            alert(xhr.status);
            alert(thrownError);
        }
        
	})
	
}
function showRoleList(){
	$.ajax({
		url:"role/ListRole",
		type:"POST",
		success: function (response) {
			$("#ListR").html(response);
        },
        error:function(xhr, ajaxOptions, thrownError){
            alert(xhr.status);
            alert(thrownError);
        }
        
	})
	
}
</script>
	<!-- ********************************************************************************************* -->

<!-- ********************************************************************************************* -->
<!-- ****************************************web**tab**End**************************************** -->

</head>
<body>
	<h1>Here is the index.jsp page</h1>
	<a href="<c:url value='/person/ListPerson'></c:url>">Go to maintain persons</a>
	<br />
	<br />
	<a href="<c:url value='/role/ListRole'></c:url>">Go to maintain	Roles</a>
	
	<br />
	<br />
	<!-- ********************************************************************************************* -->
	<!-- ******************************subtable******************************************************* -->
	<ul id="indexmenu">
		<li><a href="#">Person Data</a>
			<ul>
				<li><a href="#">Create person</a></li>
				<li><a href="#">Maintation person</a></li>
				<li><a href="#">Delete person</a></li>
			</ul>
		</li>
		<li><a href="#">Role Data</a>
			<ul>
				<li><a href="#">Create role</a></li>
				<li><a href="#">Maintation role</a></li>
				<li><a href="#">Delete role</a></li>
			</ul>
		</li>
		<li><a href="#">Else link</a>
			<ul>
				<li><a href="#">Google</a></li>
				<li><a href="#">jQuery</a></li>
				<li><a href="#">jQuery UI</a></li>
			</ul>
		</li>
		<li><a href="#">END</a></li>
	</ul>
	<!-- ********************************************************************************************* -->
	<!-- ********************************************************************************************* -->
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<!-- ********************************************************************************************* -->
	<!-- ****************************************web**tab********************************************* -->
	<div class="abgne_tab">
		<ul class="tabs">
			<li><a href="#tab1">List Person</a></li>
			<li><a href="#tab2">List Role</a></li>
		</ul>
 
		<div class="tab_container">
			<div id="tab1" class="tab_content">
				<h2>List Person</h2>
				<div id="ListP"></div>
				<input type="button" id="ListA" name="ListA" onclick="showPersonList()" value="GetList">
				<p>...</p>
			</div>
			<div id="tab2" class="tab_content">
				<h2>List Role</h2>
				<div id="ListR"></div>
				<input type="button" id="ListR" name="ListR" onclick="showRoleList()" value="GetList">
				<p>...</p>
			</div>
		</div>
	</div>
	<!-- ********************************************************************************************* -->
	<!-- ****************************************webtab**End****************************************** -->
</body>
</html>
